<template>
    <div class="SearchHead clearfix" :style="{backgroundColor: data.options.backgroundColor}">
        <div class="searchItem" v-for="(item,i) in data.options.searchForm" :key="i">
            <el-input v-if="item.type=='input'" v-model="item.search" :placeholder="item.placeholder" class="input-search"></el-input>
            <el-select v-if="item.type=='select'" v-model="item.search" :placeholder="item.placeholder" class="input-search">
                <el-option
                v-for="(option,j) in item.options"
                :key="j"
                :label="option.label"
                :value="option.value">
                </el-option>
            </el-select>
            <el-radio-group v-model="item.search" v-if="item.type=='radio'" class="input-search">
                <el-radio :label="radio.value" v-for="(radio,r) in item.options" :key="r">{{radio.label}}</el-radio>
            </el-radio-group>
            <el-button type="text" icon="el-icon-delete" size="small" class="del-btn" @click="delSearchItem(i)"></el-button>
        </div>
        <el-button icon="el-icon-plus">搜索条件</el-button>
    </div>
</template>

<script>
export default {
    name: 'SearchHead',
    props: {
        data:{
            type: Object
        }
    },
    data() {
        return {
            
        }
    },
    methods: {
        delSearchItem(i){
            this.data.options.searchForm.splice(i)
        }
    }
}
</script>
<style lang="scss" scoped>
    .SearchHead{
        padding: 15px 20px;
        .searchItem{
            float: left;
            width: 240px;
        }
        .input-search{
            width: 200px;
            float: left;
        }
        .del-btn{
            width: 30px;
            float: left;
        }
    }
</style>
